<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        body{
            margin: 0;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .hide{
            display: none;
        }
        .pg-header{
            height: 48px;
            min-width: 1190px;
            background-color: cornflowerblue;
            line-height: 48px;
        }
        .pg-header .logo{
            color: white;
            font-size: 18px;
            width: 200px;
            text-align: center;
            border-right: solid white 1px;
        }
        .pg-header .right_menus .a{
            display: inline-block;
            padding: 0 15px;
            color: white;
        }
        .pg-header .avatar{
            padding: 0 20px;
        }
        .pg-header .avatar img{
            border-radius: 50%;
        }
        .pg-header .avatar .user_info{
            display: none;
            position: absolute;width: 200px;top: 48px;right: 16px;background-color: #0f0f0f;color: white;z-index: 100
        }
        .pg-header .avatar:hover.user_info{
            display: block;

        }
        .pg-header .avatar .user_info a{
            display: block;
        }

        .menus{
            position: absolute;
            width:200px;
            left: 0;
            bottom: 0;
            top: 48px;
            background-color: antiquewhite;
            border-right: 1px solid white;
        }
        .content{
            position: absolute;
            left: 200px;
            right: 0;
            top: 48px;
            bottom: 0;
            min-width: 990px;
            overflow: auto;
            background-color: azure;
            z-index: 99;
        }
        .pg-body .menus a{
            display: block;
            padding: 10px 5px;
            border-bottom: 1px solid;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="logo left">自动化测试平台</div>
        <div class="avatar right" style="position: relative">
            <img src="/static/images/user_logo.jpg" style="width: 40px;height: 40px;">
            <div class="user_info" >
                <a>个人资料</a>
                <a>注销</a>
            </div>
        </div>

        <div class="right_menus right">
            <a class="a"><i class="fa fa-comment-o" aria-hidden="true"></i> 消息</a>
            <a class="a"><i class="fa fa-envelope-o" aria-hidden="true"></i> 邮件</a>
        </div>
    </div>

    <div class="pg-body">
        <div class="menus">
            <a>首页</a>
            <a>接口信息</a>
            <a>测试报告</a>
            <a>消息推送配置</a>

        </div>
        <div class="content">
            <ol class="breadcrumb">
              <li><a href="#">首页</a></li>
              <li><a href="#">接口信息</a></li>
              <li class="active">接口信息</li>
            </ol>


            <table  class="table table-striped table-bordered">
                <tr>
                    <td>row 1, cell 1</td>
                    <td>row 1, cell 2</td>
                </tr>
                <tr>
                    <td>row 2, cell 1</td>
                    <td>row 2, cell 2</td>
                </tr>
            </table>


        <h1>内容</h1>
        <h1>内容</h1>
        <h1>内容</h1>
        <h1>内容</h1>
            <nav aria-label="Page navigation">
              <ul class="pagination">
                <li>
                  <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                  <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>
            </nav>
        </div>

    </div>

</body>
</html>